<!-- '指定时间' 选择弹框-->
<template>
  <ele-modal
    width="900px"
    :visible="visible"
    title="指定时间"
    custom-class="demo-file-sort-dialog"
    @update:visible="updateVisible"
  >
    <ul class="flex-column">
      <li>
        <ol>
          <li class="li-hade">日期/小时</li>
          <li class="li-top" v-for="(i,j) in dayData1" :key="j">{{i}}</li>
        </ol>
      </li>
      <li>
        <ol v-for="(day,index) in recentlyDate" :key="index">
          <li class="li-hade" :style="recentlyDate.length==Number(index+1) ?'border-bottom: 1px solid #b9b4b4' : ''">{{day.substr(5,5)}}</li>
          <!-- 块区 -->
          <li class="li-body" :style="recentlyDate.length==Number(index+1) ?'border-bottom: 1px solid #b9b4b4' : ''" v-for="(i,j) in dayData2" :key="j" @click="active(j,i,day,index)"
              :class="{'bj-color':selected.indexOf(day+' '+i)!=-1}">
            <span class="layui-hide">{{i}}</span>
          </li>
        </ol>
      </li>
    </ul>
    <div style="min-height: 120px;padding-left: 36px;" v-if="selected.length>0">
      <div v-for="(i,j) in selected" :key="j">
        <div v-if="i.split(' ')[0]">{{i.split(' ')[0]}}号：{{i.split(' ')[1]}}</div>
      </div>
    </div>
    <div class="btn-class flex">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm()">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    name: "sel-time",
    props: {
      list:Object
    },
    data() {
      return {
        // 弹窗是否打开
        visible: false,
        selected: [],//选中的服务项目名称
        actived:'',
        currentIndex:0,
        // 最近7天
        recentlyDate:[],
        dayData2 : ['7:00','7:30','8:00','8:30','9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30',
          '20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30','24:00','24:30'],
        dayData1 :['07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
      }
    },
    created(){
      this.recentlyDate = this.sevenDays();
      console.log('获取最近7天========',this.recentlyDate)
    },
    methods: {
      show(){
        console.log('list==================',this.list)
        if(this.list && this.list.time){
          // 字符串 转 数组
          this.selected=this.list.time.split(",")
        }
        this.updateVisible(true)
      },
      // 数组结构
      mergeArr(arr){
        var newArr=[];
        arr.forEach(item=>{
          var dataItem =item
          if(newArr.length>0){
            var filterValue = newArr.filter(v=>{
              return v.date == dataItem.date
            })
            if(filterValue.length>0){
              newArr.forEach(n=>{
                if( n.date ==filterValue[0].date){
                  n.dateTime.push(dataItem.dateTime)
                }
              })
            }else{
              var  newDataItem={
                date:dataItem.date,
                dateTime:[dataItem. dateTime]
              }
              newArr.push(newDataItem)
            }
          }else{
            var  newDataItem={
              date:dataItem.date,
              dateTime:[dataItem.dateTime]
            }
            newArr.push(newDataItem)
          }

        })
        return newArr
      },
      active(index, item,day,dayIndex) {
        // item:时间 dayIndex:日期
        // this.selected.indexOf(item) 判断item下标是否为-1，
        // 是-1则数组中匹配不到该数据，添加
        // 不是-1则说明匹配到了，抹除
        var allDay=day+' '+item  // + ':00'增加秒
        console.log("allDay=========",allDay)
        if (this.selected.indexOf(allDay) !== -1) {
          console.log('this.selected.indexOf(item)',this.selected.indexOf(item))
          // this.selected.splice(this.selected.indexOf(item), 1); //取消
          this.selected.splice(allDay, 1); //取消
          console.log('this.selected',this.selected)
        } else {
          this.selected.push(allDay);//选中添加到数组里
          console.log('this.selected',this.selected)
        }
      },
      dangClick(item,index){
        this.currentIndex=index
        this.actived=this.actived ?'':"bj-color"
        console.log("item=========",item,'this.actived',this.actived,'index',index)
      },
      // 取消
      cancel(){

      },
      // 确定
      confirm(){
        /*// 隐藏list2
        let list2=[]
        // list 为父组件传入的已赋值数据
        for(let i=0;i<this.selected.length;i++){
          var list ={}
          this.list.publishTime=this.selected[i]
          for (const key in this.list) {
            list[key] = this.list[key]
          }
          list2.push(list)
        }
        console.log('list2=========', list2)
        this.$emit('timeClick',this.selected.toString(),list2) // toString 转字符串*/
        this.$emit('timeClick',this.selected.toString()) // toString 转字符串
        this.selected=[]
        this.updateVisible(false)
      },
      // 获取最近7天
      sevenDays() {
        // 获取最近7天
        const timer = this.$sun.timeForMat(7)
        return timer
      },
      /* 更新visible */
      updateVisible(value) {
        this.visible=value
        if(value==false){
          this.selected=[]
        }
      }
    }
  }
</script>

<style scoped lang="less">
  ol{
    display: flex;
  }
  ul{
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  ol li:nth-child(1) {
    border-left: 1px solid #ccc;
  }
  li {
    list-style: none;
  }
  .li-top {
    width: 39px;
    height: 32px;
    background-color: white;
    border-top: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
    color: #655858;
    line-height: 35px;
    font-size: 5px;
    text-align: center;
  }
  .li-hade {
    width: 70px;
    height: 32px;
    background-color: white;
    border-top: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
    color: #655858;
    line-height: 35px;
    font-size: 5px;
    text-align: center;
  }
  .li-body {
    width: 19px;
    height: 32px;
    background-color: white;
    border-top: 1px solid #D2D2D2;
    border-right: 1px solid #D2D2D2;
    color: #655858;
    line-height: 35px;
    font-size: 5px;
    text-align: center;
  }
  .layui-hide {
    display: none!important;
  }

  .btn-class{
    button{
      width: 100px;
      margin:20px
    }
  }

  .bj-color{
    background-color: rgb(95, 155, 218);
  }
</style>
